﻿@{
    ViewBag.Title = "Detail";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="fb-root"></div>
<script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=329581513823299";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="container" style="margin-top: 50px;">
    <div class="row">
        <div class="span4">
            <div class="flexslider flexslider-center-mobile flexslider-simple" data-plugin-options='{"animation":"slide", "animationLoop": true, "maxVisibleItems": 1}'>
                <ul class="slides">
                    <li>
                        <a href="@Url.Content("~/img/detail/d1.jpg")" class="zoompleFixed"><img alt="" src="@Url.Content("~/img/detail/d1.jpg")"> </a>
                    </li>
                    <li>
                        <a href="@Url.Content("~/img/detail/d2.jpg")" class="zoompleFixed"><img alt="" src="@Url.Content("~/img/detail/d2.jpg")"> </a>
                    </li>
                    <li>
                        <a href="@Url.Content("~/img/detail/d4.jpg")" class="zoompleFixed"><img alt="" src="@Url.Content("~/img/detail/d4.jpg")"> </a>
                    </li>
                </ul>                
            </div>
            <div style="margin-top: -30px;">
                <div class="fb-like" data-href="http://localhost:1045/Home" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>
                <!-- Place this tag where you want the +1 button to render. -->
            </div>
        </div>
        <div class="span8">
            <div class="row">
                <div class="span2 alert alert-info">
                   150.000 VNĐ - (Còn hàng)
                </div>
            </div>
            <hr />
            <div class="row">
                <div class="span6">
                    <form action="/Home/Buy" method="post" name="cookiesForm">
                        <div class="row controls">
                            <div class="span3 control-group">
                                <label>Chọn size</label>
                                <label class="radio inline">
                                    <input type="radio" name="Size" value="L">L
                                </label>
                                <label class="radio inline">
                                    <input type="radio" name="Size" value="M">M
                                </label>
                                <label class="radio inline">
                                    <input type="radio" name="Size" value="S">S
                                </label>
                                <label class="radio inline">
                                    <input type="radio" name="Size" value="XL">XL
                                </label>
                            </div>
                            <div class="span3 control-group">
                                <label>Số lượng </label>
                                <select name="Quatity">
                                    <option value="1">1 cái</option>
                                    <option value="2">2 cái</option>
                                    <option value="3">3 cái</option>
                                    <option value="4">4 cái</option>
                                    <option value="5">5 cái</option>
                                    <option value="6">6 cái</option>
                                </select>
                            </div>
                            <div class="span3 control-group">
                                <label > <a href="#" rel="tooltip" data-title="Vui lòng để trống nếu bạn không có" style="text-decoration: none;">Mã giảm giá</a></label>
                                <input type="text" name="code" value=""/>
                            </div>
                            <div class="span7 control-group">
                                <input type="submit" value="Đặt mua" class="btn" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="span7">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active"><a href="#description" data-toggle="tab">Thông tin sản phẩm</a></li>
                        <li><a href="#source" data-toggle="tab">Xuất xứ</a></li>
                        <li><a href="#rate" data-toggle="tab">Nhận xét</a></li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="description">
                            <p>Thông tin chỉ sơ sài đừng quan tâm.</p>
                        </div>
                        <div class="tab-pane fade" id="source">
                            <p>Hàng nhập khẩu 100% từ Lào nha.</p>
                        </div>
                        <div class="tab-pane fade" id="rate">
                            <div class="fb-comments" data-href="@Request.RawUrl" data-width="650" data-num-posts="3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<hr />
<div class="container">
    <h4>Sản phẩm cùng loại <a href="#" class="btn" style="float: right;">Xem thêm</a></h4>
    <div class="row">
        <ul class="portfolio-list sort-destination" data-sort-id="portfolio">
            <li class="span2 isotope-item ao">
                <div class="portfolio-item thumbnail">
                    <a href="/Home/Detail/" class="thumb-info">
                        <img alt="" src="@Url.Content("~/img/product/1.jpg")" />
                        <span class="thumb-info-title">
                            <span class="thumb-info-inner">Áo MSD1234</span>
                            <span class="thumb-info-type">150.000</span>
                        </span>
                        <span class="thumb-info-action">
                            <span title="Xem chi tiết" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
                        </span>
                    </a>
                </div>
            </li>
            <li class="span2 isotope-item ao">
                <div class="portfolio-item thumbnail">
                    <a href="/Home/Detail/" class="thumb-info">
                        <img alt="" src="@Url.Content("~/img/product/7.jpg")" />
                        <span class="thumb-info-title">
                            <span class="thumb-info-inner">Áo MSD1234</span>
                            <span class="thumb-info-type">150.000</span>
                        </span>
                        <span class="thumb-info-action">
                            <span title="Xem chi tiết" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
                        </span>
                    </a>
                </div>
            </li>
            <li class="span2 isotope-item ao">
                <div class="portfolio-item thumbnail">
                    <a href="/Home/Detail/" class="thumb-info">
                        <img alt="" src="@Url.Content("~/img/product/5.jpg")" />
                        <span class="thumb-info-title">
                            <span class="thumb-info-inner">Áo MSD1234</span>
                            <span class="thumb-info-type">150.000</span>
                        </span>
                        <span class="thumb-info-action">
                            <span title="Xem chi tiết" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
                        </span>
                    </a>
                </div>
            </li>
            <li class="span2 isotope-item ao">
                <div class="portfolio-item thumbnail">
                    <a href="/Home/Detail/" class="thumb-info">
                        <img alt="" src="@Url.Content("~/img/product/4.jpg")" />
                        <span class="thumb-info-title">
                            <span class="thumb-info-inner">Áo MSD1234</span>
                            <span class="thumb-info-type">150.000</span>
                        </span>
                        <span class="thumb-info-action">
                            <span title="Xem chi tiết" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
                        </span>
                    </a>
                </div>
            </li>
            <li class="span2 isotope-item ao">
                <div class="portfolio-item thumbnail">
                    <a href="/Home/Detail/" class="thumb-info">
                        <img alt="" src="@Url.Content("~/img/product/8.jpg")" />
                        <span class="thumb-info-title">
                            <span class="thumb-info-inner">Áo MSD1234</span>
                            <span class="thumb-info-type">150.000</span>
                        </span>
                        <span class="thumb-info-action">
                            <span title="Xem chi tiết" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
                        </span>
                    </a>
                </div>
            </li>
            <li class="span2 isotope-item ao">
                <div class="portfolio-item thumbnail">
                    <a href="/Home/Detail/" class="thumb-info">
                        <img alt="" src="@Url.Content("~/img/product/10.jpg")" />
                        <span class="thumb-info-title">
                            <span class="thumb-info-inner">Áo MSD1234</span>
                            <span class="thumb-info-type">150.000</span>
                        </span>
                        <span class="thumb-info-action">
                            <span title="Xem chi tiết" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
                        </span>
                    </a>
                </div>
            </li>
        </ul>
    </div>
</div>
